<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="images/favicon.ico" type="image/x-icon">
        <title>HTML5技术</title>
        <link rel="stylesheet" href="index.css" type="text/css">
        <style>
            #side-bar a{
                color:white;
                text-decoration: none;
            }
            #side-bar a:visited{
                color:white;
            }
            #mid{
                height:calc(100vh - 150px);
            }
            #east-content{
                display: inline-block;
                width:84%;
                vertical-align: top;
                height:calc(100vh - 150px);
            }
            #side-bar{
                display: inline-block;
                width:15%;
               
                border-right:1px solid #ccc;
                vertical-align: top;
                height:calc(100vh - 95px);
                box-sizing: border-box;
                padding:10px;
                background-color: #008533;
                color:white;
            }
        </style>
    </head>
    <body>
        <header>
            <span id="title">HTML5技术</span>
        </header>
        <nav id="nav-top">
            <ul>
                <li><a href="index.html">首页</a></li>|
                <li><a href="html5.html" class="active">HTML5</a></li>|
                <li><a href="css.html">CSS</a></li>|
                <li><a href="javascript.html" >JAVASCRIPT</a></li>
            </ul>
        </nav>
        <div id="mid">
            <div id="side-bar">
                <div id="main"><a href="javascript:iframesrc('main');">首页</a></div>
                <details>
                    <summary>HTML5基础</summary>
                    <ul>
                        <li><a href=""></a></li>
                    </ul>
                </details>
                <details>
                    <summary>概述</summary>
                    <ul>
                        <li><a href=""></a></li>
                    </ul>
                </details>
                <details>
                    <summary>概述</summary>
                    <ul>
                        <li><a href=""></a></li>
                    </ul>
                </details>
            </div>
            <div id="east-content">
                <iframe src="chapter2/main.html" width="100%" height="100%" frameBorder=0></iframe>

            </div>
        </div>
        <footer>
            <hr style="width:98%;margin:0 auto; color:#ccc;"/>
            <a href="#">关于我们</a>&nbsp;|<a href="#">帮助中心</a>&nbsp;|<a href="#">联系我们</a>
            <br />
            <i>Copyright&copy;佛山职业技术学院.FSPT 版权所有 2022-2023</i>
        </footer>
        <script>
            function iframesrc(){
                alert("main");
            }

        </script>
    </body>
</html>